<template>
    <el-dialog v-if="dialogVisible" :append-to-body="true" :close-on-click-modal='false' title="素材名称生成" :visible.sync="dialogVisible" @close="resetForm('addMtInfoBulkForm')" width="800px">
        <div class="flexbox">
            <div class="poster_img flexbox flexcolumn flexcenter flexjust">
                <img src="../../assets/img/file_icon3.svg" alt="">
                <span class="file_text">将应用到 {{addMtInfoBulkForm.quantity}} 个素材上</span>
            </div>
            <div class="flex flexbox flexcolumn poster_right">
                <div class="flex poster_form">
                    <el-form label-position="top" :model="addMtInfoBulkForm" :hide-required-asterisk='true' ref="addMtInfoBulkForm" :rules="addMtInfoBulkRules" class="dialog_form">
                        <el-form-item label="素材来源" prop="material_type" :rules="{ required: true, message: '请选择素材来源', trigger: ['blur', 'change']}">
                            <div class="flexbox flexcenter flexbetween">
                                <div class="region_item" :class="[addMtInfoBulkForm.material_type==2?'active':'']" @click="selectSource(2)">
                                    外部 
                                    <img src="../../assets/img/market_checked.svg" alt="" class="rg_check">
                                </div>
                                <div class="region_item" :class="[addMtInfoBulkForm.material_type==1?'active':'']" @click="selectSource(1)">
                                    自制 
                                    <img src="../../assets/img/market_checked.svg" alt="" class="rg_check">
                                </div>
                            </div>
                        </el-form-item>
                        <el-form-item label="地区" prop="area" :rules="{ required: true, message: '请选择地区', trigger: ['blur', 'change']}">
                            <div class="flexbox flexcenter flexbetween">
                                <div class="region_item" :class="[addMtInfoBulkForm.area==1?'active':'']" @click="selectArea(1)">
                                    深圳 
                                    <img src="../../assets/img/market_checked.svg" alt="" class="rg_check">
                                </div>
                                <div class="region_item" :class="[addMtInfoBulkForm.area==2?'active':'']" @click="selectArea(2)">
                                    杭州 
                                    <img src="../../assets/img/market_checked.svg" alt="" class="rg_check">
                                </div>
                            </div>
                        </el-form-item>
                        <!-- <el-form-item label="平台" prop="channel">
                            <el-select v-model="addMtInfoBulkForm.channel" placeholder="" style="width:100%">
                                <el-option label="千川" :value="1"></el-option>
                                <el-option label="UD" :value="2"></el-option>
                            </el-select>
                        </el-form-item> -->
                        <el-form-item label="品牌" prop="brand_id" :rules="{ required: true, message: '请选择品牌', trigger: ['blur', 'change']}">
                            <el-select v-model="addMtInfoBulkForm.brandSelect" filterable placeholder="请选择品牌" value-key='brand_id' style="width:100%" @change="selectBrand">
                                <!-- <el-option :label="item.brand_name+'('+(item.channel==1?'千川':'UD')+')'" :value="item" v-for="item in brandList" :key="item.brand_id">
                                    <span>{{item.brand_name}}({{item.channel==1?'千川':'UD'}})</span>
                                </el-option> -->
                                <el-option :label="item.brand_name+filters.chanelName(item.channel)" :value="item" v-for="item in brandList" :key="item.brand_id">
                                    <span>
                                        {{item.brand_name}}{{filters.chanelName(item.channel)}}
                                    </span>
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="产品" prop="product_id" :rules="{ required: true, message: '请选择产品', trigger: ['blur', 'change']}">
                            <el-select v-model="addMtInfoBulkForm.productSelect" filterable placeholder="请选择产品" value-key='product_id' style="width:100%" :disabled="!addMtInfoBulkForm.brand_id" @change="selectProduct">
                                <el-option :label="item.name" :value="item" v-for="item in productList" :key="item.product_id"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="业务场景" prop="business_scene" :rules="{ required: true, message: '请选择业务场景', trigger: ['blur', 'change']}">
                            <el-select v-model="addMtInfoBulkForm.business_scene" filterable :disabled="!addMtInfoBulkForm.product_id" placeholder="请选择业务场景" style="width:100%" @change="selectScene">
                                <el-option :label="item.scene_name" :value="item.business_scene" v-for="item in sceneList" :key="item.business_scene"></el-option>
                            </el-select>
                        </el-form-item>
                        <template v-if="addMtInfoBulkForm.material_type==1">
                            <div v-if="addMtInfoBulkForm.area==1" key="shenzhen">
                                <el-form-item label="核心创意人" prop="centre_uid" :rules="{ required: true, message: '请选择核心创意人', trigger: ['blur', 'change']}">
                                    <el-select v-model="addMtInfoBulkForm.centre_uid" filterable placeholder="请选择创意人" style="width:100%">
                                        <el-option :label="item.nickname" :value="item.id" v-for="item in centreSzList" :key="item.id"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="剪辑" prop="editor_uid" :rules="{ required: true, message: '请选择剪辑', trigger: ['blur', 'change']}">
                                    <el-select v-model="addMtInfoBulkForm.editor_uid" filterable placeholder="请选择剪辑" style="width:100%">
                                        <el-option :label="item.nickname" :value="item.id" v-for="item in editorSzList" :key="item.id"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="拍摄" prop="photographer_uid" :rules="{ required: true, message: '请选择拍摄', trigger: ['blur', 'change']}">
                                    <el-select v-model="addMtInfoBulkForm.photographer_uid" multiple collapse-tags filterable placeholder="请选择拍摄" style="width:100%">
                                        <el-option :label="item.nickname" :value="item.id" v-for="item in photoSzList" :key="item.id"></el-option>
                                    </el-select>
                                </el-form-item>
                            </div>
                            <div v-if="addMtInfoBulkForm.area==2" key="hangzhou">
                                <el-form-item label="剪辑" prop="editor_uid" :rules="{ required: true, message: '请选择剪辑', trigger: ['blur', 'change']}">
                                    <el-select v-model="addMtInfoBulkForm.editor_uid" filterable placeholder="请选择剪辑" style="width:100%">
                                        <el-option :label="item.nickname" :value="item.id" v-for="item in editorHzList" :key="item.id"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="编导" prop="director_uid" :rules="{ required: true, message: '请选择编导', trigger: ['blur', 'change']}">
                                    <el-select v-model="addMtInfoBulkForm.director_uid" filterable placeholder="请选择编导" style="width:100%">
                                        <el-option :label="item.nickname" :value="item.id" v-for="item in directorHzList" :key="item.id"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="拍摄" prop="photographer_uid" :rules="{ required: true, message: '请选择拍摄', trigger: ['blur', 'change']}">
                                    <el-select v-model="addMtInfoBulkForm.photographer_uid" filterable placeholder="请选择拍摄" style="width:100%">
                                        <el-option :label="item.nickname" :value="item.id" v-for="item in photoHzList" :key="item.id"></el-option>
                                    </el-select>
                                </el-form-item>
                            </div>
                        </template>
                    </el-form>
                </div>
                <div class="poster_btn">
                    <el-button size="small" @click="resetForm('addMtInfoBulkForm')" class="el-button-width">取 消</el-button>
                    <el-button size="small" type="primary" @click="submitForm('addMtInfoBulkForm')" :disabled="loading" :loading="loading" class="el-button-width">确 定</el-button>
                </div>
            </div>
        </div>
    </el-dialog>
</template>

<script>
export default {
    name: "",
    data() {
        return {
            loading: false,
            dialogVisible: false,
            index:null,
            brandList: [], //品牌列表
            productList: [], //产品列表
            sceneList: [], //业务场景列表
            editorHzList:[],//剪辑列表-杭州
            directorHzList:[],//编导列表-杭州
            photoHzList:[],//拍摄列表-杭州
            photoSzList:[],//拍摄列表-深圳
            centreSzList:[],//核心创意人-深圳
            editorSzList:[],//剪辑列表-深圳
            addMtInfoBulkForm: {
                brandSelect:{},
                productSelect:{},
                height:'',
                width: "",
                duration: "",
                area: 1,
                material_type:2,
                channel: "",
                business_scene: "",
                brand_id: "",
                brand_name: "",
                product_id: "",
                product_name: "",
                material: "",
                centre_uid: "",
                editor_uid: "",
                director_uid: "",
                photographer_uid: "",
                quantity:1,
            },
        };
    },
    created() {
        this.$bus.on("addMtInfoBulk", (value) => {
            this.dialogVisible = value.dialogVsb;
            this.addMtInfoBulkForm.quantity = value.quantity
            this.getBrandList();
            this.getHzEditorList()
            this.getHzDirectorList()
            this.getHzPhotoList()
            this.getSzCentreList()
            this.getSzPhotoList()
            this.getSzEditorList()
        });
    },
    beforeDestroy() {
        this.$bus.off("addMtInfoBulk");
    },
    methods: {
        //获取品牌列表
        async getBrandList() {
            const { data: res } = await this.$http.post(
                "adminapi/project/brandList"
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.brandList = res.data;
            }
        },

        // 获取产品
        async getProductList() {
            const { data: res } = await this.$http.post(
                "adminapi/project/productList",
                {
                    brand_id: this.addMtInfoBulkForm.brand_id,
                }
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.productList = res.data;
            }
        },

        // 获取业务场景
        async getSceneList() {
            const { data: res } = await this.$http.post(
                "adminapi/project/sceneList",
                {
                    brand_id: this.addMtInfoBulkForm.brand_id,
                    product_id: this.addMtInfoBulkForm.product_id,
                }
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.sceneList = res.data;
            }
        },

        // 获取剪辑人员列表-杭州
        async getHzEditorList() {
            const { data: res } = await this.$http.post(
                "adminapi/company/hzEditorList",
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.editorHzList = res.data;
            }
        },

        // 获取编导人员列表-杭州
        async getHzDirectorList() {
            const { data: res } = await this.$http.post(
                "adminapi/company/hzDirectorList",
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.directorHzList = res.data;
            }
        },

        // 获取拍摄人员列表-杭州
        async getHzPhotoList() {
            const { data: res } = await this.$http.post(
                "adminapi/company/hzPhotographerList",
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.photoHzList = res.data;
            }
        },

        // 获取拍摄人员列表-深圳
        async getSzPhotoList() {
            const { data: res } = await this.$http.post(
                "adminapi/company/szPhotographerList",
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.photoSzList = res.data;
            }
        },

        // 获取核心创意人人员列表-深圳
        async getSzCentreList() {
            const { data: res } = await this.$http.post(
                "adminapi/company/szCentreList",
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.centreSzList = res.data;
            }
        },
        // 获取剪辑人员列表-深圳
        async getSzEditorList() {
            const { data: res } = await this.$http.post(
                "adminapi/company/szClipperList",
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.editorSzList = res.data;
            }
        },

        // 地区选择
        selectArea(type){
            this.addMtInfoBulkForm.area = type
            this.addMtInfoBulkForm.editor_uid = ''
            this.addMtInfoBulkForm.photographer_uid = ''
        },

        // 来源选择
        selectSource(type){
            this.addMtInfoBulkForm.material_type = type
            if(type==2){
                this.addMtInfoBulkForm.centre_uid = ''
                this.addMtInfoBulkForm.editor_uid = ''
                this.addMtInfoBulkForm.director_uid = ''
                this.addMtInfoBulkForm.photographer_uid = ''
            }
        },

        //品牌选择
        selectBrand() {
            this.addMtInfoBulkForm.brand_id = this.addMtInfoBulkForm.brandSelect.brand_id;
            this.addMtInfoBulkForm.brand_name = this.addMtInfoBulkForm.brandSelect.brand_name;
            this.addMtInfoBulkForm.channel = this.addMtInfoBulkForm.brandSelect.channel;
            this.addMtInfoBulkForm.productSelect = {}
            this.addMtInfoBulkForm.product_id = "";
            this.addMtInfoBulkForm.product_name = "";
            this.addMtInfoBulkForm.business_scene = "";
            this.getProductList();
        },

        // 产品选择
        selectProduct() {
            this.addMtInfoBulkForm.product_id = this.addMtInfoBulkForm.productSelect.product_id;
            this.addMtInfoBulkForm.product_name = this.addMtInfoBulkForm.productSelect.name;
            this.addMtInfoBulkForm.business_scene = "";
            this.getSceneList();
        },


        // 提交添加
        submitForm(formName) {
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    this.loading = true
                    const { data: res } = await this.$http.post(
                        "adminapi/material/materialUploadName",
                        this.addMtInfoBulkForm
                    );
                    if (res.code !== 200) {
                        this.loading = false;
                        this.$message.error(res.msg);
                        return;
                    }else{
                        this.loading = false;
                        this.$parent.$parent.uploadMulti(res.data,this.addMtInfoBulkForm)
                        this.dialogVisible = false;
                        // this.resetForm('addMtInfoBulkForm')
                    }
                } else {
                    return false;
                }
            });
        },

        // 关闭重置表单
        resetForm(formName) {
            this.$refs[formName].resetFields();
            this.addMtInfoBulkForm.brandSelect = {}
            this.addMtInfoBulkForm.productSelect = {}
            this.dialogVisible = false;
        },
    },
    components: {},
};
</script>


<style scoped>
.vd_poster{
    display: block;
    border-radius: 8px;
}
.poster_img{
    width:330px;
    height: 600px;
    padding: 0 15px;
    background: rgba(165, 177, 209, 0.08);
    border-radius: 8px;
}
.dialog_form{
    overflow-y: auto;
}
.poster_right{
    margin-left: 20px;
    height: 600px;
}
.poster_form{
    overflow: auto;
    padding-right: 10px;
}
.poster_btn{
    text-align: right;
}
.region_item{
    width: 178px;
    height:46px;
    line-height: 46px;
    border: 1px solid #DCDEE2;
    border-radius: 2px;
    box-sizing: border-box;
    padding: 0 16px;
    font-size: 14px;
    color: #17233D;
    position: relative;
    cursor: pointer;
}
.region_item.active{
    border: 1px solid #4475FF;
    color: #4475FF;
}
.rg_check{
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
    display: none;
}
.region_item.active .rg_check{
    display: block;
}
.file_text{
    font-size: 14px;
    color: #616C85;
    margin-top: 5px;
}
</style>

